<template>
  <div>
    <h1>多语言实现原理</h1>
    <div>
      <el-button type="primary" @click="lang='zh'">中文</el-button>
      <el-button @click="lang='en'">English</el-button>
    </div>
    <div class="content">{{ t('morning') }}</div>
  </div>
</template>

<script>
/**
 * 中英文切换，实现条件
 * 1、当前的语言 lang
 * 2、中英文对照表
 * 3、翻译官 --- 实现一个函数来充当翻译官
 * */
export default {
  data() {
    return {
      lang: 'zh', // zh 表示中文 en：表示英文
      msg: '早上好！',
      messages: {
        zh: {
          morning: '早上好！'
        },
        en: {
          morning: 'Good Morning!'
        }
      }
    }
  },
  methods: {
    t(content) {
      /**
       * 实现中英文翻译
       * 1、当前的语言标识符  - this.lang
       * 2、有中英文对照表 --- this.messages
       * 3、翻译的内容 content
       * */
      // 根据当前语言获取到当前的语言对象表
      const curLang = this.messages[this.lang]
      // 根据需要翻译的标识符查找对应的内容
      const value = curLang[content]
      return value
    }
  }
}
</script>

<style scoped>

</style>
